<template>
    <div class="ls-add-admin">

        <div class="ls-card ls-coupon-edit__form">
            <div class="nr weight-500 m-b-20">{{$t('签到设置')}}</div>
            <el-form ref="list" :model="list" label-width="120px" size="small">
                <el-form-item :label="$t('应用状态')">
                    <el-radio v-model="list.is_open" :label="0">{{$t('关闭')}}</el-radio>
                    <el-radio v-model="list.is_open" :label="1">{{$t('开启')}}</el-radio>
                    <span class="desc">{{$t('关闭或开启充值奖励应用，关闭后不显示商城充值奖励入口')}}</span>
                </el-form-item>

            </el-form>
        </div>

        <div class="ls-card ls-coupon-edit__form m-t-16">
            <div class="nr weight-500 m-b-20">{{$t('签到规则')}}</div>

            <el-form label-width="120px">
                <el-form-item :label="$t('每天签到奖励')">
                    <el-checkbox v-model="status">{{$t('积分')}}</el-checkbox>
                    <el-input v-model="list.daily.integral"></el-input>
                </el-form-item>

                <el-form-item :label="$t('连续签到奖励')">
                    <el-table :data="list.continuous" style="width: 100%" size="mini">
                        <el-table-column prop="days" min-width="150" :label="$t('连续天数')">
                            <template slot-scope="scope">
                                {{scope.row.days}} {{$t('天')}}
                            </template>
                        </el-table-column>
                        <el-table-column min-width="250" prop="integral" :label="$t('连续奖励')">
                            <template slot-scope="scope">
                                {{scope.row.integral}} {{$t('积分')}}
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" :label="$t('操作')" width="350">
                            <template slot-scope="scope" v-if="scope.row.days >= 2">
                                <div class="flex">
                                    <ls-dialog class="inline flex row-center m-r-24" width="35vw"
                                        @confirm="editRule(scope.row)">
                                        <el-button type="text" size="small" slot="trigger" @click="setting(scope.row)">{{$t('编辑')}}</el-button>

                                        <div class="flex row-center">
                                            <el-form ref="address" label-width="120px">
                                                <el-form-item :label="$t('连续签到天数')" prop="return_district">
                                                    <el-input class="ls-input" v-model="scope.row.days"
                                                        show-word-limit />
                                                </el-form-item>
                                                <el-form-item :label="$t('连续积分状态')" prop="return_district">
                                                    <el-radio
                                                        v-model="scope.row.integral_status"
                                                        :label="0">{{$t('关闭')}}</el-radio>
                                                    <el-radio
                                                        v-model="scope.row.integral_status"
                                                        :label="1">{{$t('开启')}}</el-radio>
                                                </el-form-item>
                                                <el-form-item :label="$t('赠送积分数量')" prop="return_address">
                                                    <el-input class="ls-input"
                                                        v-model="scope.row.integral"
                                                        show-word-limit />
                                                </el-form-item>
                                            </el-form>
                                        </div>
                                    </ls-dialog>

                                    <ls-dialog class="inline flex row-center m-r-24" :content="`' ${$t('确认删除这条连续签到奖励吗？')}} '`"
                                        width="30vw" @confirm="delRule(scope.row)">
                                        <el-button type="text" size="small" slot="trigger">{{$t('删除')}}</el-button>
                                    </ls-dialog>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>

                    <ls-dialog class="inline flex row-center m-l-24" width="40vw" @confirm="addRule()">
                        <div class="add-btn flex m-t-24 row-center" slot="trigger"
                            @click="signAdd.days='',signAdd.integral='',signAdd.integral_status=1">{{$t('添加连续签到奖励')}}</div>

                        <div class="flex row-center">
                            <el-form ref="address" label-width="120px">
                                <el-form-item :label="$t('连续签到天数')" prop="return_district">
                                    <el-input class="ls-input" v-model="signAdd.days" show-word-limit />
                                </el-form-item>
                                <el-form-item :label="$t('连续积分状态')" prop="return_district">
                                    <el-radio v-model="signAdd.integral_status" :label="0">{{$t('关闭')}}</el-radio>
                                    <el-radio v-model="signAdd.integral_status" :label="1">{{$t('开启')}}</el-radio>
                                </el-form-item>
                                <el-form-item :label="$t('赠送积分数量')" prop="return_address">
                                    <el-input class="ls-input" v-model="signAdd.integral" show-word-limit />
                                </el-form-item>
                            </el-form>
                        </div>
                    </ls-dialog>
                </el-form-item>

                <el-form-item :label="$t('每天签到奖励')">
                    <el-input class="m-t-10" type="textarea" :rows="10" :placeholder="$t('请输入内容')" v-model="list.remark">
                    </el-input>
                </el-form-item>
            </el-form>

        </div>

        <!-- 底部保存或取消 -->
        <div class="bg-white flex row-center ls-fixed-footer">
            <div class="row-center flex">
                <el-button size="small" @click="$router.go(-1)">{{$t('取消')}}</el-button>
                <el-button size="small" type="primary" @click="onSubmit('form')">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">

 import  i18n from '@/plugins/i18n' 
import { Component, Vue } from "vue-property-decorator";
import lsDialog from "@/components/ls-dialog.vue";
import {
    apiCalendarGetRule,
    apiCalendarSetRule,
    apiCalendarAddRule,
    apiCalendarEditRule,
    apiCalendarDelRule,
} from "@/api/marketing/calendar";

@Component({
    components: {
        lsDialog,
    },
})
export default class CalendarRuleEdit extends Vue {
    /** S Data **/

    // 规则信息
    list: any = {
        is_open: 1,
        daily: {
            integral_status: false,
            integral: "",
        },
        continuous: [],
        remark: "",
    };

    // 连续签到奖励信息
    signAdd = {
        days: "", //是	integer	连续签到天数
        integral_status: "0", //是	integer	赠送积分状态 0-关闭 1-开启
        integral: "", //是	integer	赠送积分数量
    };

    /** E Data **/

    /** S Methods **/
    // 添加连续签到奖励数据
    addRule() {
        apiCalendarAddRule({ ...this.signAdd }).then((res) => {
            this.detail();
            // this.$message.success("添加成功!");
        });
    }

    setting(row: any) {
        this.signAdd.days = row.days;
        this.signAdd.integral_status = row.integral_status;
        this.signAdd.integral = row.integral;
    }

    // 编辑连续签到奖励
    editRule(data: any) {
        apiCalendarEditRule({
            ...data,
        }).then((res) => {
            this.detail();
            // this.$message.success("修改成功!");
        });
    }

    // 删除连续签到天数
    delRule(data: any) {
        apiCalendarDelRule({ id: data.id }).then((res) => {
            this.detail();
            // this.$message.success("删除成功!");
        });
    }

    // 设置签到规则
    onSubmit() {
        this.list.daily.integral_status = this.list.daily.integral_status
            ? 1
            : 0;
        apiCalendarSetRule({ ...this.list })
            .then(() => {
                this.detail();
                // this.$message.success("修改成功!");
            })
            .catch(() => {
                // this.$message.error("数据获取失败!");
            });
    }

    // 详情
    detail() {
        apiCalendarGetRule({})
            .then((res) => {
                this.list = res;
            })
            .catch(() => {
                // this.$message.error("数据获取失败!");
            });
    }

    /** E Methods **/

    /** S Life Cycle **/
    created() {
        this.detail();
    }
    /** E Life Cycle **/

    get status() {
        if (this.list.daily.integral_status == 1) {
            return true;
        } else {
            return false;
        }
    }

    set status(event: any) {
        this.list.daily.integral_status = event;
    }
}
</script>

<style lang="scss" scoped>
.ls-add-admin {
    padding-bottom: 80px;

    .ls-input {
        width: 380px;
    }

    .desc {
        display: block;
        color: #999;
        font-size: 12px;
    }

    .add-btn {
        width: 800px;
        height: 40px;
        box-sizing: border-box;
        border: 2px solid #f5f5f5;
    }

    .item {
        padding: 30px 0;
        margin-bottom: 50rpx;
        position: relative;
        background-color: #f5f5f5;
        .del {
            right: 10px;
            top: 0px;
            font-size: 24px;
            position: absolute;
        }
    }
}
</style>